<template>
	<div class="page panel">
		<div class="panel-header">
			<div class="panel-header_title" :class="{ 'panel-header-active': tabState == 1 }" @click="tabState = 1">
				组件列表
			</div>
			<!-- <div
				class="panel-header_title"
				:class="{ 'panel-header-active': tabState == 2 }"
				@click="tabState = 2"
			>
				图层
			</div> -->
		</div>
		<!-- <div class="panel-group">
            <y-select :options="dbTypeOtions" v-model="dbTypeDefaultVal"></y-select>
        </div> -->
		<!-- <y-tabs v-show="tabState === 1">
			<y-tab-panel
				:iconClass="item.iconClass"
				:name="item.groupName"
				v-for="(item, index) in groupComponentList"
				:key="index"
			>
				<y-collapse>
					<y-collapse-item
						:iconClass="group.iconClass"
						:name="group.title"
						v-for="(group, gIndex) in item.children"
						:key="gIndex"
					>
						<div class="panel-controls_wrap">
							<div
								class="panel-controls_item"
								v-for="(component, cIndex) in group.components"
								:key="cIndex"
							>
								<div class="panel-controls_title">{{ component.title }}</div>
								<img
									class="panel-controls_img"
									src="./control.jpg"
									draggable="true"
									@dragstart="onDrag"
									:data-title="component.title"
									@click="onAddComponent"
								/>
							</div>
						</div>
					</y-collapse-item>
				</y-collapse>
			</y-tab-panel>
		</y-tabs> -->
		<!-- 组件菜单 -->
		<div class="menu" v-show="tabState === 1">
			<div class="menu-list">
				<div v-for="(item, index) in newMenu" :key="item.id">
					<el-popover
						:popper-class="index < 3 ? 'epop' : 'epop2'"
						:placement="index < 7 ? 'right' : 'right-start'"
						width="400"
						trigger="hover"
						offset="0"
						:disabled="item.id == '00'"
					>
						<div class="menu-expansion">
							<div v-for="unit in item.components" :key="unit.id">
								<div
									class="menu-expansion-unit"
									draggable="true"
									@dragstart="onDrag"
									:data-title="unit.title"
									@click="onAddComponent"
								>
									<div>
										<img :src="unit.icon" :width="unit.width || 36" :height="unit.height || 36" />
									</div>
								</div>
								<div class="menu-expansion-center">{{ unit.title }}</div>
							</div>
						</div>

						<div
							class="menu-unit"
							:class="item.id == mid ? 'menu-active' : ''"
							@mouseover="setmid(item.id)"
							slot="reference"
							@click="clckMenu(item)"
						>
							<div class="menu-img">
								<img :src="item.iconClass" :width="item.width || 36" :height="item.height || 36" />
							</div>
							<div class="menu-title">{{ item.title }}</div>
						</div>
					</el-popover>
				</div>
			</div>
		</div>
		<!-- 图层 -->
		<div class="coverage" v-show="tabState === 2">
			<!-- <span @click="show()">dangqianshuju </span> -->
			<div class="cunit" v-for="item in element" :key="item.uuid" @click="selectitem(item.uuid)">
				<div class="activeele" v-if="nowElement == item.uuid"></div>
				<div class="defele" v-else></div>
				<div class="elementimg"></div>
				<div class="elementtext">{{ item.name }}</div>
				<!-- <div class="elementtext">{{ item.uuid }}</div> -->
			</div>
		</div>
		<!-- <div>
            <y-input v-model="searchVal" placeholder="搜索" suffix-icon="el-icon-search"></y-input>
        </div> -->
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { createUUID } from '@/common/js/mUtils'
import menudata from './menu'

export default {
	name: 'ComponentPanel',
	data() {
		return {
			dbTypeOtions: [
				{
					value: '全部',
					label: '全部',
				},
			],
			dbTypeDefaultVal: '全部',
			searchVal: '',
			groupComponentList: [],
			tabState: 1,
			element: [], //列表元素
			nowElement: '',
			activeId: '00',
			mid: '',
			newMenu: menudata,
		}
	},
	mounted() {
		this.initData()
	},
	computed: {
		...mapGetters(['projectDataInfo', 'activeElementUUID']),
	},
	watch: {
		projectDataInfo(val) {
			this.element = (val.pages && val.pages[0] && val.pages[0].elements) || []
		},
		activeElementUUID(val) {
			this.nowElement = val
		},
	},
	methods: {
		setmid(id) {
			this.mid = id
		},
		activedMenu(id) {
			this.activeId = id
		},
		initData() {
			this.$axios
				.get('/groupcomponent/all')
				.then(res => {
					if (res.code === 200) {
						this.groupComponentList = res.body
					}
				})
				.catch(e => {
					console.warn(e.message)
				})
		},
		onDrag(e) {
			let title = e.currentTarget.dataset.title
			e.dataTransfer.setData('title', title)
		},
		onAddComponent(e) {
			let title = e.currentTarget.dataset.title
			this.$axios
				.post('/componentconfig/detail', { name: title })
				.then(res => {
					if (res.code === 200) {
						let dynamicConfig = res.body
						dynamicConfig.uuid = createUUID()
						dynamicConfig.props[0].fields[1].value[0].value.value = 0
						dynamicConfig.props[0].fields[1].value[1].value.value = 0
						this.$store.dispatch('addElement', dynamicConfig)
					}
				})
				.catch(e => {
					console.warn(e.message)
				})
		},
		show() {
			console.log(this.projectDataInfo)
		},
		selectitem(uuid) {
			this.nowElement = uuid
			this.$store.dispatch('setActiveElementUUID', uuid)
		},
		clckMenu(item) {
			if (item.id === '00') this.$store.dispatch('setActiveElementUUID', '')
		},
	},
}
</script>

<style lang="scss" scoped>
// 新菜单
.menu {
	&-unit {
		width: 150px;
		height: 100px;
		text-align: center;
		position: relative;
	}
	&-unit:hover {
		background: #33374e;
		border: 2px solid #2e57d3;
	}
	&-active {
		border: 2px solid #2e57d3;
	}

	&-expansion {
		height: 280px;
		width: 400px;
		background: #181818;
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		align-content: flex-start;
		overflow-y: auto;
		top: -50px;
		left: -10px;
		position: absolute;
		&-unit {
			width: 100px;
			height: 70px;
			background: #26272b;
			margin: 10px;
			display: flex;
			align-content: center;
			div {
				margin: 0 auto;
				display: flex;
				align-items: center;
			}
		}
		&-unit:hover {
			background: #33374e;
			border: 2px solid #2e57d3;
		}
		&-center {
			text-align: center;
		}
	}
	&-unit-active {
		background: #33374e;
		border: 2px solid #2e57d3;
	}
	&-img {
		padding-top: 20px;
		padding-bottom: 10px;
	}
}
</style>
<style lang="stylus" scoped>
.panel {
	z-index: 100;
	color: #bcc9d4;
	font-size: 12px;
	background: rgb(29, 33, 38);
	display: flex;
	flex-direction: column;
	width: 150px;
	min-width: 150px;
	.panel-header {
		display: flex;
		height: 40px;
		align-items: center;
		background: rgb(46, 52, 60);
		cursor: pointer;
		.panel-header_title {
			width: 100%;
			border-left: 1px #000 solid;
			text-align: center;
			height: 38px;
			line-height: 38px;
		}
	}
	.panel-header-active {
		background: rgb(40, 40, 40);
	}
	.panel-group {
		padding: 5px;
	}
	.panel-controls_wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 5px;
		width: 100%;
		font-size: 12px;
		.panel-controls_item {
			display: flex;
			flex-direction: column;
			width: 75px;
			height: 80px;
			margin-bottom: 6px;
			background: rgb(24, 26, 28);
			cursor: pointer;
			.panel-controls_img {
				height: 58px;
			}
			.panel-controls_title {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 22px;
			}
		}
	}
}
.ui-select {
	background: rgb(14, 16, 19);
}
.coverage {
	width: 100%;
	overflow-y: auto;
	.cunit {
		background: #13161a;
		width: 100%;
		height: 50px;
		border: 1px #282828 solid;
		border-right: none;
		border-bottom: none;
		display: flex;
	}
}
.elementtext {
	line-height: 50px;
}
.activeele {
	width: 15px;
	height: 50px;
	border-left: 2px solid #257cf5;
}
.defele {
	width: 15px;
	height: 50px;
	border-left: 2px solid #191c21;
}
</style>
